<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            box-sizing: content-box;
            border: 20px solid #dddddd;
            width: 300px;
            height: 300px;
            padding: 40px;
            margin: 10px;
            text-align: center;
        }

        #child-box {
            box-sizing: content-box;
            /*box-sizing: border-box;*/
            border: 20px solid #dddddd;
            width: 100px;
            height: 120px;
            padding: 20px;
            text-align: center;
            margin: 20px;
            overflow: auto;
        }

        #box2 {
            box-sizing: content-box;
            border: 20px solid #dddddd;
            width: 300px;
            height: 300px;
            padding: 40px;
            margin: 10px;
            text-align: center;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="box">
    这是父盒子
    <div id="child-box">
        这是子盒子1
    </div>
</div>
<div id="box2">
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
    <p>这是内容</p>
</div>
<script>
    const childBox = document.getElementById('child-box');

    /**
     * node.scrollWidth/Height:表示容器实际占据的空间，因为如果有滚动条的情况下，会有一部分内容会被卷起来，这部分卷起内容的宽高就是scrollTop/Left
     * 所以当这个等式成立时 node.scrollWidth/Height = node.clientWidth/Height + node.scrollLeft/Top 表示滚动到底部或右部
     * 如果没有卷起的内容时，那么node.scrollLeft/Top = 0
     * 容器内容没有超出容器时： node.scrollWidth/Height = node.clientWidth/Height
     */
    // content-box: scrollWidth = contentWidth(包含滚动条) + paddingLeft + paddingRight - 滚动条的width(window下一般是16) + scrollLeft
    // =>没有卷起的内容时： scrollWidth = 100 + 20 + 20 - 16/0(没有滚动条时)  + 0 = 124/140
    console.log('scrollWidth:', childBox.scrollWidth)

    // content-box: scrollHeight = contentHeight(包含滚动条) + paddingTop + paddingBottom - 滚动条的width(window下一般是16) + scrollTop
    // =>没有卷起的内容时： scrollHeight = 120 + 20 + 20 - 16/0 + 0 = 144/160
    console.log('scrollHeight:', childBox.scrollHeight)

    // =>没有卷起的内容时 scrollLeft = 0
    console.log('scrollLeft:', childBox.scrollLeft)

    // =>没有卷起的内容时 scrollTop = 0
    console.log('scrollTop:', childBox.scrollTop)

</script>
<script>
    console.log('----------------box2--------------------')
    const box2 = document.getElementById('box2');

    // 当容器内容超出容器的大小时，就会有内容被隐藏或被卷起（取决于overflow），这时的scrollWidth/Height 表示整个容器实际的宽度和高度
    console.log('scrollWidth:', box2.scrollWidth)
    console.log('scrollHeight:', box2.scrollHeight)
    console.log('scrollLeft:', box2.scrollLeft) // 默认时是0，表示没有卷起高度
    console.log('scrollTop:', box2.scrollTop)

    // 监听滚动事件，输出相应的值
    box2.onscroll = function () {
        console.log('----------------box2--------------------')
        console.log('clientHeight:', box2.clientHeight)
        console.log('scrollWidth:', box2.scrollWidth)
        console.log('scrollHeight:', box2.scrollHeight)
        console.log('scrollLeft:', box2.scrollLeft)
        console.log('scrollTop:', box2.scrollTop)

        if (box2.clientHeight + Math.ceil(box2.scrollTop) >= box2.scrollHeight) {
            console.log('滚动到底部了!')
        }
    }
</script>
</body>
</html>